<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Register</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fashionpress Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<link href="/fashionpress/client/css/bootstrap.css" rel='stylesheet' type='text/css' /><!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Custom Theme files -->
<link href="/fashionpress/client/css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<!--webfont-->
<link href='http://fonts.useso.com/css?family=Lato:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="/fashionpress/client/js/jquery-1.11.1.min.js"></script>
<!--    JavaScript校验要求：-->
<!--    1.每一项都必须填写内容或者做出选择，不能存在空项；-->
<!--    2.用户名：只能包含英文字母和下划线，长度为6-18个字符；-->
<!--    3.密码：必须包含英文字母大小写和数字，长度不能少于6个字符；-->
<!--    4.确认密码：必须与密码相同；-->
<!--    5.联系电话：确保手机号码的有效性；-->
<!--    6.电子邮箱：确保电子邮箱的有效性；-->
	<script>
		function YHMonblus(){
			var username=document.getElementById("username");
			// var reN =/^\d{6,18}$/;
			var re = /^[a-zA-Z_]{6,18}$/;
			if(username.value==""){
				$("#username_msg").html("<font color='red'>用户名不能为空！</font>");
			}
			else if(username.value.length < 6 ||username.value.length > 18){
				$("#username_msg").html("<font color='red'>格式错误,长度应为6-18个字符</font>");
			}
			else if(!re.test(username.value)){

				$("#username_msg").html("<font color='red'>格式错误,只能包含英文字母和下划线</font>");
			}
			else {
					var username =$('#username').val();
					var jasonname = {
						'username' : username
					};
					console.log(jasonname);
					$.ajax({
						type: 'POST',
						url: '/fashionpress/register/registerNameCheck',
						dataType: 'text',
						data: JSON.stringify(jasonname),
						contentType : 'application/json',
						success: function(data) {
							if(data == "yes"){
								$("#username_msg").html("<font color='green'>用户名可以使用！</font>");
							}
							else{
								$("#username_msg").html("<font color='red'>用户名已被占用！</font>");
							}

						},
						error: function() {
							console.log('fucking error')
						}
					});
			}
		}
		//   密码
		function MMonblus(){

			var password=document.getElementById("password");
			var re = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{6,16}$/;
			// var reg=/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;

			if(password.value==""){
				$("#password_msg").html("<font color='red'>请输入密码！</font>");
			}
			else if(password.value.length < 6 || password.value.length > 16){
				$("#password_msg").html("<font color='red'>密码长度至少为6位！至多为16位!</font>");
			}
			else if(!re.test(password.value)){
				$("#password_msg").html("<font color='red'>格式错误,必须包含英文字母大小写和数字！</font>");

			}
			else {
				$("#password_msg").html("<font color='green'>密码验证成功！</font>");
			}
		}
		//    确认密码
		function QRMMonblus(){
				// 获取输入的文本内容
				var password =document.getElementById("password");
				var repassword =document.getElementById("repassword");

				if(repassword.value==""){
					$("#repassword_msg").html("<font color='red'>请输入确认密码</font>");
				}
				else if(password.value != repassword.value){
					$("#repassword_msg").html("<font color='red'>两次密码输入不一致！</font>");
				}
				else {
					$("#repassword_msg").html("<font color='green'>两次密码输入一致！</font>");
				}
		}
		//    联系电话
		function LXDHonblus(){
			var phone=document.getElementById("phone");
			var re = /^1\d{10}$/;
			if(phone.value==""){
				$("#phone_msg").html("<font color='red'>请输入联系电话！</font>");
			}
			else if(!re.test(phone.value)){
				$("#phone_msg").html("<font color='red'>电话格式输入错误！</font>");
			}
			else {
				// 获取输入的文本内容
				var phone =$('#phone').val();
				var jasonphone = {
					'phone' : phone
				};
				$.ajax({
					type: 'POST',
					url: '/fashionpress/register/registerPhoneCheck',
					dataType: 'text',
					data: JSON.stringify(jasonphone),
					contentType : 'application/json',
					success: function(data) {
						console.log(data);
						if(data == "yes"){
							$("#phone_msg").html("<font color='green'>电话可以使用！</font>");
						}
						else{
							$("#phone_msg").html("<font color='red'>电话已被占用！</font>");
						}

					},
					error: function() {
						console.log('fucking error')
					}
				});
			}
		}

		//    电子邮箱
		function DZYXonblus(){
			var email=document.getElementById("email");
			var re= /[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}/;
			if(email.value==""){
				$("#email_msg").html("<font color='red'>请输入电子邮箱！</font>");
			}
			else if(!re.test(email.value)){
				$("#email_msg").html("<font color='red'>邮箱格式不正确！</font>");
			}
			else {
				// 获取输入的文本内容
				var email =$('#email').val();
				var jasonemail = {
					'email' : email
				};
				console.log(jasonemail);
				$.ajax({
					type: 'POST',
					url: '/fashionpress/register/registerEmailCheck',
					dataType: 'text',
					data: JSON.stringify(jasonemail),
					contentType : 'application/json',
					success: function(data) {
						console.log(data);
						if(data == "yes"){
							$("#email_msg").html("<font color='green'>邮箱可以使用！</font>");
						}
						else{
							$("#email_msg").html("<font color='red'>邮箱已被占用！</font>");
						}

					},
					error: function() {
						console.log('fucking error')
					}
				});
			}
		}
		function confirm() {
			var namemsg=document.getElementById("username_msg");
			var emailmsg=document.getElementById("email_msg");
			var phonemsg=document.getElementById("phone_msg");
			var passwordmsg=document.getElementById("password_msg");
			var repasswordmsg=document.getElementById("repassword_msg");
			if(namemsg.innerText == "用户名可以使用！" && emailmsg.innerText == "邮箱可以使用！" && phonemsg.innerText == "电话可以使用！" && passwordmsg.innerText == "密码验证成功！" && repasswordmsg.innerText == "两次密码输入一致！")
			{
				return true;
			}
			else
			{
				alert("请正确填写注册表单！");
				return false;
			}

		}

	</script>
</head>
<body>
<div class="header">
	<div class="header_top">
		<div class="container">
			<div class="logo">
				<a href="/fashionpress/client/index.html"><img src="/fashionpress/client/images/logo.png" alt=""/></a>
			</div>
			<ul class="shopping_grid">
				<a href="../register/"><li>注册</li></a>
				<a href="../login/"><li>登录</li></a>
				<a href="#"><li><span class="m_1">购物车</span>&nbsp;&nbsp;(0) &nbsp;<img src="client/images/bag.png" alt=""/></li></a>
				<div class="clearfix"> </div>
			</ul>
		    <div class="clearfix"> </div>
		</div>
	</div>
	<div class="h_menu4"><!-- start h_menu4 -->
		<div class="container">
				<a class="toggleMenu" href="#">Menu</a>
				<ul class="nav">
					<li class="active"><a href="../index" data-hover="Home">Home</a></li>
					<li><a href="about.html" data-hover="关于我们">About Us</a></li>
					<li><a href="#" data-hover="个人中心">Careers</a></li>
					<li><a href="#" data-hover="我的订单">Company Registration</a></li>
					<li><a href="#" data-hover="购物车">Wish List</a></li>
				</ul>
				 <script type="text/javascript" src="/fashionpress/client/js/nav.js"></script>
	      </div><!-- end h_menu4 -->
     </div>
</div>
<div class="column_center">
  <div class="container">
	<div class="search">
	  <div class="stay">Search Product</div>
	  <div class="stay_right">
		  <input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
		  <input type="submit" value="">
	  </div>
	  <div class="clearfix"> </div>
	</div>
    <div class="clearfix"> </div>
  </div>
</div>
<div class="about">
  <div class="container">
      <div class="register, register-but">
		  	  <form action="/fashionpress/register/registerCheck" method="post" onsubmit="return confirm()">
				 <div class="register-top-grid">
					<h3>PERSONAL INFORMATION</h3>
					 <div>
						 <span>Username<label>*</label></span>
						 <input type="text" id="username" name="username" , onblur="YHMonblus()">
						 <span id="username_msg"></span>
					 </div>
					 <div>
						 <span>Email Address<label>*</label></span>
						 <input type="text"id="email" name="email"onblur="DZYXonblus()">
						 <span id="email_msg"></span>
					 </div>

					 <div >
						 <span>Phone<label>*</label></span>
						 <input type="text"id="phone" name="phone" onblur="LXDHonblus()">
						 <span id="phone_msg"></span>
					 </div>
					 <div class="clearfix"> </div>
					 <a class="news-letter" href="#">
<!--						 <label class="checkbox"><input id="r1" type="checkbox" name="checkbox"  value="0"><i> </i>Sign Up for Newsletter</input></label>-->

					 </a>

					 </div>
				     <div class="register-bottom-grid">
						    <h3>LOGIN INFORMATION</h3>
						 <div>
							 <span>Password<label>*</label></span>
							 <input type="password" id="password" name="password" onblur="MMonblus()">
							 <span id="password_msg"></span>
						 </div>
							 <div>
								<span>Confirm Password<label>*</label></span>
								<input type="password"id="repassword" name="repassword" onblur="QRMMonblus()">
								 <span id="repassword_msg"></span>
							 </div>

						 <div style="float:left;">
							 <input type="submit" value="submit">
						 </div>
						 <div class="clearfix"> </div>
					 </div>
				</form>
		   </div>
	</div>
</div>
<div class="footer_bg">
</div>
<div class="footer">
	<div class="container">
		<div class="col-md-3 f_grid1">
			<h3>About</h3>
			<a href="#"><img src="/fashionpress/client/images/logo.png" alt=""/></a>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
		</div>
		<div class="col-md-3 f_grid1 f_grid2">
			<h3>Follow Us</h3>
			<ul class="social">
				<li><a href=""> <i class="fb"> </i><p class="m_3">Facebook</p><div class="clearfix"> </div></a></li>
			    <li><a href=""><i class="tw"> </i><p class="m_3">Twittter</p><div class="clearfix"> </div></a></li>
				<li><a href=""><i class="google"> </i><p class="m_3">Google</p><div class="clearfix"> </div></a></li>
				<li><a href=""><i class="instagram"> </i><p class="m_3">Instagram</p><div class="clearfix"> </div></a></li>
			</ul>
		</div>
		<div class="col-md-6 f_grid3">
			<h3>Contact Info</h3>
			<ul class="list">
				<li><p>Phone : 1.800.254.5487</p></li>
				<li><p>Fax : 1.800.254.2548</p></li>
				<li><p>Email : <a href="mailto:info(at)fashionpress.com"> info(at)fashionpress.com</a></p></li>
			</ul>
			<ul class="list1">
				<li><p>Aliquam augue a bibendum ipsum diam, semper porttitor libero elit egestas gravida, ut quam, nunc taciti</p></li>
			</ul>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<div class="footer_bottom">
       	<div class="container">
       		<div class="cssmenu">
				<ul>
					<li class="active"><a href="/fashionpress/client/login.html">Privacy Policy</a></li> .
					<li><a href="checkout.html">Terms of Service</a></li> .
					<li><a href="checkout.html">Creative Rights Policy</a></li> .
					<li><a href="/fashionpress/client/login.html">Contact Us</a></li> .
					<li><a href="register.html">Support & FAQ</a></li>
				</ul>
			</div>
			<div class="copy">
			    <p>Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
		    </div>
		    <div class="clearfix"> </div>
       	</div>
</div>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>		